<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <style type="text/css">
        body {
            margin: 0 auto;
            max-width: 720px;
            padding: 0 10px;
            text-align: left;
        }

        .title {
            color: red;
            font-weight: bold;
            padding: 10px 0 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
        }

        h2 {
            font-size: 15px;
            font-weight: normal;
        }

        .wrapper {
            padding: 20px 0 0;
            line-height: 24px;
        }

        .tab {
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .tab:last-child {
            border-bottom: 0;
        }

        .param {
            word-break: break-all;
        }

        .action {
            padding: 10px 0 0;
        }

        .action button {
            padding: 5px 20px;
        }

        .select-ipt {
            position: relative;
            padding: 0 0 0 105px;
        }

        .select-ipt .tt {
            position: absolute;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            left: 0;
            top: 0;
        }

        .weui_input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            height: 24px;
            line-height: 24px;
        }

        .pageAnimationScale {
            float: left;
            margin-right: 10px;
            width: 80px;

        }

        /*.weui-actionsheet-top-shade{*/
        /*opacity: .7 !important;*/
        /*}*/

        /*.weui-actionsheet-top{*/
        /*position: fixed!important;*/
        /*left: 0;*/
        /*top: 0;*/
        /*-webkit-transform: translateY(-100%);*/
        /*transform: translateY(-100%);*/
        /*-webkit-backface-visibility: hidden;*/
        /*backface-visibility: hidden;*/
        /*z-index: 5000;*/
        /*width: 100%;*/
        /*background-color: #fff;*/
        /*-webkit-transition: -webkit-transform .3s;*/
        /*transition: -webkit-transform .3s;*/
        /*}*/

        /*.weui-actionsheet-top-toggle{*/
        /*-webkit-transform: translateY(0);*/
        /*transform: translateY(0);*/
        /*}*/

        .weui-page-scale .page-scale .slide2 {
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            position: relative;
            transition-property: transform, -webkit-transform;
        }

        .weui-page-scale .page-scale .slide2 li {
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .weui-page-scale .page-scale .slide2 li .container {
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
        }

        .weui-page-scale .page-scale .slide2 li .container img {
            max-width: 100%;
            margin-top: -30px;
        }

        .slide {
            position: relative;
            z-index: 1;
        }

        .slide li {
            flex-shrink: 0;
            height: 74.666667vw;
            position: relative;
            transform: translate3d(0, 0, 0);
            z-index: 1;
        }

        .slide li .img {
            height: 100%;
            background-size: cover;
            background-position: center;
        }
    </style>
<!--    <script src="../js/jquery.js"></script>-->
    <script src="layer.js"></script>
</head>
<body>
<div class="wrapper">
    <h1>layer-weui封装函数</h1>
    <p class="title">type:0弹窗,1:msg,2:loading,3:网页</p>
    <div class="tab">
        <h2>layer.open({})原生弹窗:</h2>
        <p>
            <span>anim：</span>
            <span class="param">scale,up,left,right</span>
        </p>
        <p class="action">
            <button class="layerOpen">纯文字</button>
            <button class="layerOpen1">有标题</button>
            <button class="layerOpen2">有按钮</button>
        </p>
        <p class="action">
            <button class="layerOpen3">up</button>
            <button class="layerOpen4">down</button>
            <button class="layerOpen5">left</button>
            <button class="layerOpen6">right</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerAlert(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">点击回调函数</span>
        </p>
        <p class="action">
            <button class="layerAlert">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerConfirm(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">确定按钮回调函数</span>
        </p>
        <p>
            <span>onCancel：</span>
            <span class="param">取消按钮回调函数</span>
        </p>
        <p class="action">
            <button class="layerConfirm">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerLoading(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerLoading">数据加载中</button>
        </p>
        <p class="action">
            <button class="layerLoading2">数据加载中(type:2)</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerSuccess(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerSuccess">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerDelete(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerDelete">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerMsg():</h2>
        <p class="action">
            <button class="layerMsg">点击（scale）</button>
        </p>
        <p class="action">
            <button class="layerMsgFoot">点击（bottom）</button>
        </p>
    </div>
    <div class="tab">
        <h2>layer自带图标</h2>
        <div class="action">
            <i class="weui-icon-success"></i>
            <i class="weui-icon-waiting"></i>
            <i class="weui-icon-warn"></i>
            <i class="weui-icon-info"></i>
            <i class="weui-icon-success-circle"></i>
            <i class="weui-icon-success-no-circle"></i>
            <i class="weui-icon-checked"></i>
            <i class="weui-icon-checked-multi"></i>

            <i class="weui-icon-waiting-circle"></i>
            <i class="weui-icon-circle"></i>
            <i class="weui-icon-download"></i>
            <i class="weui-icon-info-circle"></i>
            <i class="weui-icon-safe-success"></i>
            <i class="weui-icon-safe-warn"></i>
            <i class="weui-icon-cancel"></i>
            <i class="weui-icon-search"></i>

            <i class="weui-icon-clear"></i>
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            <i class="weui-icon_msg"></i>
            <i class="weui-icon_msg weui-icon-warn"></i>
            <i class="weui-icon_msg-primary weui-icon-warn"></i>
            <P>图标2</P>
            <i class="weui-loading"></i>
            <i class="weui-icon-more"></i>
            <i class="weui-icon-btn_goback"></i>
            <i class="weui-icon-btn_close"></i>
        </div>
    </div>
</div>
<script type="text/javascript">
    const doc=document,query='querySelector';
    const S = s => doc[query](s);

    addEventHandler(S('.layerOpen'),'click',function (){
        layer.open({
            zIndex: 10,
            fixed: false,
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    addEventHandler(S('.layerOpen1'),'click',function (){
        layer.open({
            title: [
                '温馨提示',
                'background-color: #F2F2F2;',
            ],
            content: '系统升级中，敬请期待！',
        })
    })

    addEventHandler(S('.layerOpen2'),'click',function (){
        layer.open({
            content: '系统升级中，敬请期待！',
            btn: '知道了',
        })
    })

    addEventHandler(S('.layerOpen3'),'click',function (){
        layer.open({
            anim: "up",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    addEventHandler(S('.layerOpen4'),'click',function (){
        layer.open({
            anim: "down",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    addEventHandler(S('.layerOpen5'),'click',function (){
        layer.open({
            anim: "left",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    addEventHandler(S('.layerOpen6'),'click',function (){
        layer.open({
            anim: "right",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    addEventHandler(S('.layerAlert'),'click',function (){
        var title = '警告';
        var msg = 'AlphaGo 就是天网的前身，人类要完蛋了！11';
        layer.alert({
            msg: msg,
            onOK: function (i) {
                layer.close(i);
            }
        })
    })

    addEventHandler(S('.layerConfirm'),'click',function (){
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    })

    addEventHandler(S('.layerLoading'),'click',function (){
        layer.loading();
    })

    addEventHandler(S('.layerLoading2'),'click',function (){
        layer.loading({'skin': 't2'});
    })

    addEventHandler(S('.layerSuccess'),'click',function (){
        layer.toast('操作成功');
    })

    addEventHandler(S('.layerDelete'),'click',function (){
        layer.toast({
            'msg':'取消登录',
            'style':'error'
        });
    })

    addEventHandler(S('.layerMsg'),'click',function (){
        layer.msg({
            "msg": "操作成功操作成功操作成功",
            "skin": 'msg2'
        });
    })

    addEventHandler(S('.layerAlert'),'click',function (){
        var title = '警告';
        var msg = 'AlphaGo 就是天网的前身，人类要完蛋了！11';
        layer.alert({
            msg: msg,
            onOK: function (i) {
                layer.close(i);
            }
        })
    })

    addEventHandler(S('.layerMsgFoot'),'click',function (){
        layer.msg({
            "msg": '操作成功操',
            "direct": 'bottom',
        });
    })

    // $('.layerOpen').on('click', function () {
    //     layer.open({
    //         zIndex: 10,
    //         fixed: false,
    //         content: '系统升级中，敬请期待！',
    //         className: 'weui',
    //     })
    // })

    // $('.layerOpen1').on('click', function () {
    //     layer.open({
    //         title: [
    //             '温馨提示',
    //             'background-color: #F2F2F2;',
    //         ],
    //         content: '系统升级中，敬请期待！',
    //     })
    // })

    // $('.layerOpen2').on('click', function () {
    //     layer.open({
    //         content: '系统升级中，敬请期待！',
    //         btn: '知道了',
    //     })
    // })

    // $('.layerOpen3').on('click', function () {
    //     layer.open({
    //         anim: "up",
    //         content: '系统升级中，敬请期待！',
    //         className: 'weui',
    //     })
    // })

    // $('.layerOpen4').on('click', function () {
    //     layer.open({
    //         anim: "down",
    //         content: '系统升级中，敬请期待！',
    //         className: 'weui',
    //     })
    // })

    // $('.layerOpen5').on('click', function () {
    //     layer.open({
    //         anim: "left",
    //         content: '系统升级中，敬请期待！',
    //         className: 'weui',
    //     })
    // })

    // $('.layerOpen6').on('click', function () {
    //     layer.open({
    //         anim: "right",
    //         content: '系统升级中，敬请期待！',
    //         className: 'weui',
    //     })
    // })

    // $('.layerAlert').on('click', function () {
    //     var title = '警告';
    //     var msg = 'AlphaGo 就是天网的前身，人类要完蛋了！11';
    //     layer.alert({
    //         msg: msg,
    //         onOK: function (i) {
    //             layer.close(i);
    //         }
    //     })
    // });

    // $('.layerConfirm').on('click', function () {
    //     var title = '确认删除？';
    //     var msg = '您确定要删除文件<<苍井空全集>>吗?';
    //     layer.confirm({
    //         msg: msg,
    //         title: title,
    //         btn: ['继续支付', '取消订单'],
    //         onOK: function () {
    //             layer.loading('正在登陆中');
    //         },
    //         onCancel: function () {
    //             alert(2);
    //         }
    //     });
    // });

    // $('.layerLoading').on('click', function () {
    //     layer.loading();
    // });
    //
    // $('.layerLoading2').on('click', function () {
    //     layer.loading({'skin': 't2'});
    // });
    //
    // $('.layerSuccess').on('click', function () {
    //     layer.toast('操作成功');
    // });
    //
    // $('.layerDelete').on('click', function () {
    //     layer.toast('取消登录', 'error');
    // });
    //
    // $('.layerMsg').on('click', function () {
    //     layer.msg({
    //         "msg": "操作成功操作成功操作成功",
    //         "skin": 'msg2'
    //     });
    // });

    // $('.layerMsgFoot').on('click', function () {
    //     layer.msg({
    //         "msg": '操作成功操',
    //         "direct": 'bottom',
    //     });
    //
    // });

    function addEventHandler(target, type, func) {
        if (target.addEventListener) {
            //监听IE9，谷歌和火狐
            target.addEventListener(type, func, false);
        } else if (target.attachEvent) {
            target.attachEvent("on" + type, func);
        } else {
            target["on" + type] = func;
        }
    }

    function removeEventHandler(target, type, func) {
        if (target.removeEventListener) {
            //监听IE9，谷歌和火狐
            target.removeEventListener(type, func, false);
        } else if (target.detachEvent) {
            target.detachEvent("on" + type, func);
        } else {
            delete target["on" + type];
        }
    }
</script>
</body>
</html>
